<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--! 响应式布局  必写 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>card</title>

  <!-- ! bootstrap4基本所需css/js引入 -->
  <link rel="stylesheet" href="./css/bootstrap.css">
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="./js/jquery-3.5.1.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="./js/bootstrap.js"></script>

</head>

<body>
  <div class="container">
    <!-- 卡片 class="card -->
    <!-- !通过style="width: 18rem;"设置死 卡片宽度，这样里面的图片就不会过大了 但同时也就没有响应式了  -->
    <!-- !style="max-width: 18rem;" 这样设置，图片也不会过大，而且还有响应式 -->
    <div class="card mb-3" style="max-width: 18rem;">

      <!-- 卡片头部页眉 -->
      <div class="card-header">
        图片（上下）卡片
      </div>

      <!--  class="card-img-top" 卡片上的图片 这个图片可以放到下面去 -->
      <img class="card-img-top" src="./images/1.png" alt="Card image cap">

      <!-- 卡片的主体内容 -->
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <!-- .card-text定义文字在卡片中 -->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>

      <!--  class="card-img-bottom" 卡片下方的图片  -->
      <!-- <img class="card-img-bottom" src="./images/1.png" alt="Card image cap"> -->

      <!-- 卡片尾部页脚 -->
      <div class="card-footer text-muted">
        卡片页脚
      </div>

    </div>
  </div>

  <br>
  <br>
  <br>

  <div class="container">
    <div class="card bg-dark text-white" style="max-width: 18rem;">
      <!-- 背景图片 -->
      <img class="card-img" src="./images/2.png" alt="Card image">
      <!-- 图片上的文字 -->
      <div class="card-img-overlay">
        <h5 class="card-title">图片（作为背景，文字浮现在图片上）卡片</h5>
        <p class="card-text">这样的卡片好像不能加header页眉</p>
      </div>
    </div>
  </div>

  <br>
  <br>
  <br>

  <div class="container">
    <!-- !style="max-width: 18rem;" 这样设置，图片也不会过大，而且还有响应式 -->
    <div class="card mb-3" style="max-width: 540px;">
      <!-- 栅格布局 -->
      <div class="row no-gutters">
        <!-- 左侧图片区占4列 -->
        <div class="col-md-4">
          <img src="./images/logo.gif" class="card-img" alt="...">
        </div>
        <!-- 右侧文字区占8列 -->
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">左右图片文字卡片</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
              content. This content is a little bit longer.</p>
            <!-- 小文字 -->
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <br>
  <br>
  <br>
</body>

</html>